
import { _type } from '../utils/index.js'
import { _events, _query, _children } from '../ui/dom.js'

export const svgns = 'http://www.w3.org/2000/svg'
export const xlinkns = 'http://www.w3.org/1999/xlink'
export const createSvg = (tag, props, events, children) => {
    let el = document.createElementNS(svgns, tag)
    const _props = (props) => {
        Object.keys(props).forEach(key => {
            let val = props[key]
            if (val !== undefined) {
                switch (key.toLocaleLowerCase()) {
                    case 'class':
                        el.className = val
                        break
                    // case 'name':
                    case 'innertext':
                    case 'id':
                    case 'innerhtml':
                    case 'value':
                    case 'textcontent':
                        el[key] = val
                        break
                    case 'pattern':
                        el.setAttribute('fill', `url("#${val}")`)
                        break;
                    case 'click':
                        el.addEventListener('click', val, false)
                        break
                    case 'xlink:href':  //case 'marker-end':
                        el.setAttributeNS(xlinkns, key, val);
                        break;
                    default:
                        el.setAttribute(key, val)
                        // el.setAttributeNS(xlinkns, key, val);
                        break
                }
            }
        })
    }

    _props(props)

    // 事件
    if (events) {
        _events(el, events)
    }


    if (children) {
        _children(el, children)
    }
    return el
}



// 全局定义
export const _defs = (children, global = {}) => {
    return createSvg('defs', {}, {}, children)

    // let { id } = global
    // let defs = _query('defs')
    // if (defs) {
    //     if (!_query('#' + id)) {
    //         _children(defs, children)
    //     }
    //     return
    // } else {
    //     defs = createSvg('defs', {}, {}, children)
    // }

    // return defs

    // let defs = createSvg('defs', {}, {}, children)
    // if (global) {
    //     if (!_query('#' + id)) {
    //         let svg = _query('svg')
    //         if (!svg) {
    //             return defs
    //             // svg = createSvg('svg', {
    //             //     width: '100%',
    //             //     height: '100%'
    //             // }, {}, defs)
    //             // let app = _query("#app")
    //             // document.body.insertBefore(svg, app)
    //             // document.body.appendChild(svg)
    //         }

    //         // svg.appendChild(defs)

    //         // return
    //     }
    // }
    // return defs
}

//  use 需要在defs之后才有效
// 使用use标签时，注意use的结尾标签，不要在</use>结尾标签之前再写其他标签，会显现不出来，就是所谓的被吞了。
export const _use = ({ id, x = 0, y = 0 }) => {
    return createSvg(
        'use', {
        x, y,
        // x: 0,
        // y: 0,
        // width: '100%',
        // height: '100%',
        'xlink:href': '#' + id,
        // xlink:href=“#id”
    },
        {}
    )
}
export const _symbol = (children) => {
    return createSvg(
        'symbol', {
        id: 'shape',
    },
        children
    )
}
export const _circle = (options, props, events, children) => {
    let { o = [], r = 100, name, id } = options
    return createSvg(
        'circle', {
        cx: o[0],
        cy: o[1],
        r,
        name,
        id,
        ...props,
    },
        events,
        children
    )
}
const getPoints = (options) => {
    let points = []
    if (Array.isArray(options)) {
        points = options
    }
    else if (_type(options) === 'object') {
        points = options.points || []
    }
    return points
}
export const _line = (options = {}, props = { stroke: 'black', fill: 'none' }, events, children) => {
    let points = getPoints(options)
    if (points.length === 2) {
        let [p1, p2] = points
        return createSvg(
            'line', {
            x1: p1[0],
            y1: p1[1],
            x2: p2[0],
            y2: p2[1],
            ...props,
        },
            events, children
        )
    } else {
        return createSvg('polyline', {
            points,
            ...props
        })
    }
    // todo

}
export const _rect = (options = {}, props, events, children) => {
    let points = getPoints(options)
    if (points.length === 2) {
        let [p1, p2] = points
        return createSvg(
            'rect', {
            x: Math.min(p1[0], p2[0]),
            y: Math.min(p1[1], p2[1]),
            width: Math.abs(p2[0] - p1[0]),
            height: Math.abs(p2[1] - p1[1]),
            ...props,
        },
            events, children
        )
    }
    // todo
}

export const _path = (d, props, events, children) => {
    return createSvg(
        'path', {
        d,
        ...props,
    },
        events, children
    )
}



// 文本
export const _text = (options, props, events, children) => {
    let fn = (x, y, text, props, events, children) => {
        return createSvg(
            'text', {
            x,
            y,
            textContent: text,
            ...props,
        },
            events, children
        )
    }
    if (Array.isArray(options)) {
        let [x, y, text] = options
        return fn(x, y, text, props, events, children)

    } else {
        let { x, y, text } = options
        return fn(x, y, text, props, events, children)
    }
}

export const _g = (children, props) => {
    return createSvg(
        'g', {
        ...props,
    }, {},
        children
    )
}

export const _marker = (children, props) => {
    return createSvg('marker', {
        ...props
    }, {}, children)
}
